<template>
    <div class="example">
        <h1>Example Component</h1>
        <p>This is an example of using px units that will be converted to rem.</p>
    </div>
    <div class="user-profile">
        <h2>用户信息</h2>
        <template v-if="userStore.isLoggedIn">
            <p>欢迎, {{ userStore.userFullName }}</p>
            <van-button @click="handleLogout">登出</van-button>
        </template>
        <template v-else>
            <van-cell-group inset style="margin-top: 20px">
                <van-field v-model="name" label="姓名" />
                <van-field v-model="email" label="邮箱" />
                <van-button type="primary" @click="handleLogin">登录</van-button>
            </van-cell-group>
        </template>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores/userStore'
const userStore = useUserStore()

const name = ref('')
const email = ref('')

const handleLogin = () => {
    userStore.login(name.value, email.value)
    name.value = ''
    email.value = ''
}

const handleLogout = () => {
    userStore.logout()
}
</script>

<style lang="scss" scoped>
.example {
    width: 300px;
    padding: 20px;
}

h1 {
    font-size: 24px;
}

p {
    font-size: 16px;
    line-height: 1.5;
}
.user-profile {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
}
</style>
